<template>
	<view class="newTab">
		<view class="display__list">
			<view class="product-list column__2">
				<view class="product-item" v-for="(product, index) in itemData.data" :key="index"
					@click="gotoDetail(product.product_id)">
						<view class="product-cover">
							<image :src="product.product_image" mode="aspectFill"></image>
						</view>
						<view class="product-info">
							<view v-if="itemData.style.show.productName == 1" class="product-title">
<!-- 								<text class="text_88-0">全新</text> -->
								{{ product.product_name }}
							</view>
							<view class="price d-s-c">
								<view v-if="itemData.style.show.productPrice == 1" class="theme-price"
									style="width: 100%;">
									<view class="d-b-c">
										<view class="">
											<text class="f22">¥</text>
											<text class=""
												style="font-weight: 600;">{{ product.product_price }}</text>
											<text class="f22">/天</text>
										</view>
									</view>
									<view class="d-s-c  mt10" style="height: 60rpx;">
										<view class="d-c-c f24"
											style="height: 16px; padding: 0 8rpx; background: #D2EEEE;border-radius: 2px;color: #1FADAB; opacity: 0.5;">
											租完即送
										</view>
										<view class="d-c-c f24 "
											style="margin-left: 12px; height: 16px; padding: 0 8rpx; background: #D2EEEE;border-radius: 2px;color: #1FADAB; opacity: 0.5;">
											顺丰包邮
										</view>
									</view>
								</view>
							</view>
						</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemData:{
					data: [],
					group: "shop",
					name: "商品组",
					params: {source: "choice", auto: {category: 65,productSort: "all",showNum: "6"}},
					style: {background: "#F6F6F6", display: "list", show: {linePrice: 0,productName: 1,productPrice: 1,productSales: 0,sellingPoint: 0}},
					type: "product"
				}
			};
		},
		props: ['dataList'],
  	watch: {
  	  dataList: {
  	    handler(newVal, oldVal) {
  	      const list = Object.values(newVal);
  	      list.length > 0 && this.getList(list.filter(i => i.name === "商品组")[1]);
  	    },
  	    deep: true,
  	  }
  	},
		methods: {
			/*跳转产品详情*/
			gotoDetail(e) {
				let url = '/pages/product/detail/detail?product_id=' + e;
				this.gotoPage(url);
			},
			getList(list) {
      console.log('观测', list)
			const result = list.data.map(item => ({
				product_id: item.product_id,
				product_name: item.product_name,
				product_price: item.product_price,
				product_image: item.product_image,
				product_sales: item.product_sales,
			}));
			this.itemData.data.length === 0 && this.itemData.data.push( ...result ); 
      console.log(result)
		}
		}
	};
</script>

<style>
.newTab{
	padding:0 20rpx;
	background:#F6F6F6;
}
.text_88-0 {
  width: 40rpx;
  height: 20rpx;
  overflow-wrap: break-word;
  color: rgba(21,21,21,1);
  font-size: 20rpx;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 20rpx;
  margin: 10rpx 256rpx 0 -296rpx;
}
.newTab .product-list .product-cover image {
	width: 70%;
	height: 95%;
	margin:0 auto;
}
.newTab .display__list .column__2 .product-item:nth-child(2n + 0) {
	margin-right: 0;
}
.newTab .product-list .product-title {
	display: -webkit-box;
	font-size: 32rpx;
	overflow: hidden;
	word-wrap: break-word;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.newTab .product-list.column__2 .product-title {
		height: 80rpx;
		line-height: 40rpx;
		margin-top: 20rpx;
		font-size: 26rpx;
		margin-bottom: 20rpx;
}
.newTab .product-list .price {
	font-size: 34rpx;
}
.newTab .product-list.column__2 .price {
		margin-top: 10rpx;
		font-size: 30rpx;
}
	
.newTab .product-list.column__2 {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
}
.newTab .display__slide .product-list {
	flex-wrap: nowrap;
}
.newTab .column__2 .product-cover {
	width: 220rpx;
	height: 180rpx;
	border-radius: 12rpx;
	margin: 20rpx auto;
}
.newTab .product-list.column__2 .product-info {
		padding: 0 24rpx;
}
.newTab .column__2 .product-item {
	width: 345rpx;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
	padding-bottom: 20rpx;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0px 8rpx 3rpx 0px rgba(6, 0, 1, 0.03);
	border-radius: 12rpx;
	}
.theme-price {
	color:red;
}
.moneyDay{
	text-align:center;
}
</style>